<!DOCTYPE html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

<!-- 引入ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		$(function() {
			$('#grid').datagrid({
		
				url: 'product.json',
				pagination:true,
				fit : true,
				border : false,
				rownumbers : true,
				striped : true,
				pageList: [3,5,50],
				toolbar: [{
					id:"save",
					text:"新增",
					iconCls: 'icon-add',
					handler: function() {
						if(currentEditIndex!=undefined){
							return;
						}
						currentEditIndex=0;
						// 插入一行新的数据，到首行 
						$("#grid").datagrid('insertRow', {
							index : currentEditIndex,
							row : {} // 空对象 
						});
						
						// 开启编辑状态 
						$("#grid").datagrid('beginEdit',0);
						
					}
				}, '-', {
					id:"edit",
					text:"编辑",
					iconCls: 'icon-edit',
					handler: function() {
						if(currentEditIndex != undefined){
								// 正在编辑
								return ;
							}
							// 获取到选中行
							var row = $("#grid").datagrid('getSelected');
							var index = $("#grid").datagrid('getRowIndex',row);
							// 编辑选中的行
							$("#grid").datagrid('beginEdit',index);
							// 保存到全局变量
							currentEditIndex = index ;
					}
				}, '-', {
					id:"save",
					text:"保存",
					iconCls: 'icon-save',
					handler: function() {
						// 保存编辑效果 
							$("#grid").datagrid('endEdit',currentEditIndex);
					}
					}, '-', {
					id:"取消",
					text:"编辑",
					iconCls: 'icon-cancel',
					handler: function() {
						// 保存编辑效果 
						$("#grid").datagrid('cancelEdit',currentEditIndex);
					}
				}],

				columns: [
					[{
							field: 'id',
							title: '主键',
							width: 100,
							editor : {
							type: 'validatebox',
							options: {
								required : true 
							}
						}
						},

						{
							field: 'name',
							title: '商品名称',
							width: 100,
							editor : {
							type: 'validatebox',
							options: {
								required : true 
							}
						}
						},

						{
							field: 'price',
							title: '商品价格',
							width: 100,
							align: 'right',
							editor : {
							type: 'validatebox',
							options: {
								required : true 
							}
						}
						}
					]
				],
				singleSelect : true,// 只能编辑一行
				onAfterEdit : function(rowIndex, rowData, changes){
					// 当保存成功后 才会触发 
					currentEditIndex = undefined;
				}, 
				onCancelEdit : function(rowIndex, rowData){
					currentEditIndex = undefined;
				}
				
				

			});
			// 全局变量 
			var currentEditIndex ;

		})
	</script>

	<body>
		<table id="grid"></table>
	</body>

</html>